<template>
	<div class="sc">
		<div class="sc-bor">
			<div class="sc-header" style="left:.55rem; right:.55rem;">松鼠币商城</div>
		</div>
		<div class="sc-content">
			<router-view></router-view>
			<router-link to='/IntegralData'>
				<label class="sc-content-lab">
					<span class="sc-lab-title">我的松鼠币</span>
					<span class="sc-number">{{sumScore}}</span>
				</label>
			</router-link>
	
			<div class="sign-dao">
				<p class="sign">
					<span>连续签到</span>
					<span>{{continueDay}}</span>
					<span>天 主人明天再来试试运气</span>
				</p>
				<router-link to="/IntegralMine">
					<button class="button-primary">赚松鼠币</button>
				</router-link>
			</div>
			<div class="ite-sign">
				<span class="ite-sig" @click="signIn">{{sign}}</span>
			</div>
		</div>
		<div class="integral-nav">
			<router-link to="/ShoppingCart">
				<div class="nav--item f1">
					<i class="cm-icon"></i>
					<p class="item-title">购物袋</p>
					<span class="item-desc">想要的都在这儿</span>
				</div>
			</router-link>
			<router-link to="/IntegralExchange">
				<div class="nav-item1 f1">
					<i class="cm-icon"></i>
					<p class="item-title">我的兑换</p>
					<span class="item-desc">查看松鼠币兑换订单</span>
				</div>
			</router-link>
		</div>
		<div class="ui-switch">
			<div class="ui-swt">
				<img class="ui-img" src="http://pic10.cdn.3songshu.com:81//assets/upload/adv/7f65904dfd52aaafdec8d023f52178ac.jpg">
			</div>
		</div>
		<div class="integral-floor">
			<div class="floor-item">
				<img src="http://pic10.cdn.3songshu.com:81//assets/upload/adv/32497450aaae47680732671bae40127c.jpg">
			</div>
			<div class="product">
				<div class="product-items">
					<div v-for="(items,indexs) in floors" :key="indexs">
						<div class="product-item" style="width:2.7rem; height:3.8rem" v-for="(item,index) in items.products" :key="index">
							<div class="item-cont">
								<router-link to="/productDetail">
								<div class="item-img" style="height:1.74rem;">
									<router-view></router-view>
									<router-link to="/productDetail">
										<img :src="item.pic" class="img5">										
									</router-link>
								</div>
								</router-link>
								<p class="item-adv">{{item.name}}</p>
								<p class="item-limit">每人限兑 {{item.limit}} 件</p>
								<p class="item-price">
									<i class="icon"></i>
									{{item.integralAmout}}
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="product-items">
					<div v-for="(items,indexs) in floors" :key=indexs>
						<div class="product-item" style="width:2.7rem; height:3.8rem" v-for="(item,index) in items.products" :key=index>
							<div class="item-cont">
								<div class="item-img" style="height:1.74rem;">
									<router-link to="/productDetail">
										<img :src="item.pic" class="img5">										
									</router-link>
								</div>
								<p class="item-adv">{{item.name}}</p>
								<p class="item-limit">每人限兑 1 件</p>
								<p class="item-price">
									<i class="icon"></i>
									{{item.integralAmout}}
								</p>
							</div>
						</div>
					</div>
				</div>
				
			</div>
		</div>
		<div class="toTop" @click="toTop ">
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			floors: [],
			continueDay: 0,
			sumScore: 0,
			addScore: 40,
			sign: "",
		}
	},
	methods: {
		signIn() {
			var lastTime = localStorage.getItem("lastTime");
			if (lastTime) {
				var now = new Date();
				var last = new Date(lastTime);
				var between = now.getTime() - last.getTime();
				if (between / 1000 / 60 / 60 / 24 < 1) {
					console.log("今日已签到");
					return;
				}
			}
			this.continueDay += 1;
			this.sumScore += this.addScore;
			var time =  new Date().toLocaleDateString();
			localStorage.setItem("lastTime", time);
			localStorage.setItem("lastNum", this.continueDay);
			this.sign = "已签到";
			this.$store.commit("addCoin", this.addScore,time);
		},
		toTop(){
			document.body.scrollTop = 0;
		}
	},
	computed: {
	},
	mounted() {
		fetch("../../static/data/Integral/IntegralIndex.json")
			.then(res => {
				return res.json();
			})
			.then(res => {
				this.floors = res.data.floors;
			})

		// 增加或修改存储内容
		var lastTime = localStorage.getItem("lastTime");
		var lastNum = localStorage.getItem("lastNum");
		if (lastTime && lastNum) {		
			var now = new Date();		
			var last = new Date(lastTime);		
			var between = now.getTime() - last.getTime();
			var b = between / 1000 / 60 / 60 / 24;
			if (b > 2) {
				console.log("清除", b)
				// 未连续，清除从新记录
				this.continueDay = 0;
				localStorage.clear();
				this.sign = "未签到";
				this.$store.commit("clearCoinList");
			} else {
				// 连续
				this.continueDay = parseInt(lastNum);
				this.sumScore = parseInt(lastNum * this.addScore);
				if ( b <= 2 && b > 1) {
					this.sign = "未签到";
				} else {
					this.sign = "已签到";
				}
				
			}
		} else {
			// 首次签到
			this.sign = "未签到"
		}
		console.log("松鼠币",this.$store.state.coinList);
	}
}
</script>

<style scoped>
@import "../../static/css/base.css";
.sc {
	border: 0;
	vertical-align: baseline;
	font: inherit;
	font-size: 100%;
	position: relative;
}

.sc-header {
	font-size: 17px;
	color: #000;
	display: block;
	position: absolute;
	top: 0;
	z-index: 0;
	overflow: hidden;
	margin: 0 .1rem;
	min-width: .3rem;
	height: 44px;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
	line-height: 44px;
}

.sc-bor {
	border-bottom: .01rem solid #ddd;
	height: 44px;
}

.sc-content {
	position: relative;
	padding: 2rem 0 .1rem;
	overflow: hidden;
	text-align: center;
	background-color: #fff;
}

.sc-content-lab {
	font-weight: 400;
	font-size: 15px;
	line-height: .01rem;
}

.sc-lab-title {
	line-height: 2em;
	display: block;
	position: absolute;
	top: .2rem;
	right: 2.3rem
}

.sc-content .sc-number {
	position: relative;
	display: inline-block;
	font-size: .55rem;
	line-height: .43rem;
	padding-bottom: .27rem;
	color: #ff9601;
	top: -1.2rem
}

.sc-number:after {
	position: absolute;
	background-color: #757575;
	top: 90%;
	height: .09rem;
	bottom: 0;
	left: -.01rem;
	border-radius: 20%;
	content: '';
	opacity: .1;
	width: 1rem;
}

.sign {
	padding-bottom: .09rem;
	margin-top: -1.5rem;
	height: .5rem;
}

.sign span {
	font-size: 13px;
}

.sign-dao {
	margin-top: .55rem
}

.button-primary {
	width: 1.45rem;
	height: .45rem;
	min-width: .2rem;
	padding: 0;
	line-height: .45rem;
	border-radius: .4rem;
	border: none;
	font-size: 15px;
	background-color: #77bc1f;
	color: #fff;
	font-weight: 400;
}

.ite-sign {
	position: absolute;
	right: -.1rem;
	;
	top: .67rem;
	width: .8rem;
	height: .34rem;
	border-radius: .13rem;
	background-color: #77bc1f;
	font-size: 15px;
}

.ite-sign .ite-sig {
	display: inline-block;
	color: #fff;
	line-height: .18rem;
	margin-left: -.03rem;
}

.integral-nav {
	width: 100%;
	height: .75rem;
	overflow: hidden;
	background-color: #fff;
	border-top: 1px solid #e0e0e0;
}

.integral-nav .nav--item {
	width: 46%;
	padding: .1rem 0 .1rem .56rem;
	position: relative;
	height: .89rem;
}

.f1 {
	float: left;
}

.integral-nav .cm-icon {
	position: absolute;
	top: .02rem;
	left: .1rem;
}

.cm-icon {
	background-image: url(../../static/img3/gouwudai.png);
	background-size: 100% auto;
	width: .62rem;
	height: .7rem;
}

.item-title {
	margin: .1rem 0 0 .25rem;
	line-height: 1em;
	font-size: 16px;
}

.item-desc {
	line-height: 1em;
	color: #999;
	font-size: 13px;
	position: absolute;
	right: .35rem
}

.nav-item1 {
	padding: .1rem 0 .1rem .56rem;
	position: relative;
	padding-left: .55rem;
	width: 50%;
	height: .89rem;
}

.nav-item1 .cm-icon {
	background-image: url(../../static/img3/dingdan.png);
	background-size: 100% auto;
	height: .65rem;
}

.ui-switch {
	width: 100%;
	height: 1.77rem;
	background-color: #fff;
	margin-top: .05rem;
	position: relative;
}

.ui-swt {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: hidden;
}

.ui-img {
	width: 100%;
	height: 1.75rem;
	background-color: #f9f9f9;
}

.integral-floor {
	padding-top: .05rem;
}

.integral-floor .floor-item {
	width: 100%;
	margin-bottom: .05rem;
}

.integral-floor .floor-item img {
	width: 100%;
	height: .55rem;
}

.product {
	height: 14.6rem;
}

.product .product-items {
	padding-right: .03rem;
	display: flex;
}

.product-items {
	width: 50%;
}

.product .item-cont {
	padding-bottom: .02rem;
	background-color: #fff;
}

.product .item-img {
	margin-bottom: .05rem;
	position: relative;
	padding-top: 100%;
	width: 100%;
	overflow: hidden;
}

.product .item-img .img5 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.item-adv {
	overflow: hidden;
	padding: 0 .08rem;
	margin: 0;
	height: 1.5em;
	line-height: 1.5em;
	color: #000;
	font-size: 16px;
}

.item-limit {
	padding: 0 .08rem;
	height: 1.5em;
	line-height: 1.5em;
	margin: -.02rem 0 .03rem;
	white-space: normal;
	overflow: hidden;
	color: #999;
	font-size: 15px;
}

.item-price {
	color: #77bc1f;
	position: relative;
	margin-bottom: 0;
	padding: 0 .25rem;
	line-height: 1.5em;
	overflow: visible;
	font-size: 16px;
}

.item-price .icon {
	position: absolute;
	left: .1rem;
	top: 25%;
	background-image: url(../../static/img3/songshubi.png);
	background-size: 100% auto;
	width: .11rem;
	height: .11rem;
}

</style>